<template>
	<view class="tr_content">
		<!-- 有车求货 & 小件快递 -->
		<!-- <view class="tr_header">
			<view @click="handeleItem(index)" :class="index===indexID?'tr_header_item':'tr_header_item_active'"
				v-for="(item,index) in arrList" :key="index">{{lang==='zh'?item.title:item.title_ru}}</view>
		</view> -->

		<!-- 出发国-目的国 -->
		<view class="tr_country">
			<image :src="HTTP_IMG_UTL+'one_11565@4x.png'" mode="" style="width: 52rpx;height: 52rpx;" />
			<view class="tr_country_block">
				<view class="country_block_left" @click="handeleSetout(1)">
					<view class="left_model">
						<view style="display: flex;color: #3D3D3D ;">
							<view style="z-index: 100;font-size: 25rpx;">{{$t('出发国家')}}</view>
							<view class="backTJ_FD"></view>
						</view>
						<view style="font-size: 20rpx;">{{model.setOutTitle !==''?model.setOutTitle:$t('请选择')}}</view>
					</view>
				</view>
				<view class="country_block_right" @click="handeleSetout(2)">
					<view class="left_model">
						<view style="display: flex;color: #3D3D3D ;">
							<view style="z-index: 100;font-size: 25rpx;">{{$t('到达国家')}}</view>
							<view class="backTJ_FD"></view>
						</view>
						<view style="font-size: 20rpx;">
							{{model.destinationCountryTitle !==''?model.destinationCountryTitle:$t('请选择')}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 出发城市-目的城市 -->
		<view class="tr_country">
			<image :src="HTTP_IMG_UTL+'one44_568@4x.png'" mode="" style="width: 52rpx;height: 52rpx;" />
			<view class="tr_country_block">
				<view class="country_block_left">
					<view class="left_model">
						<view style="display: flex;color: #3D3D3D ;">
							
							<view style="z-index: 100;font-size: 25rpx;">{{$t('出发城市')}}</view>
							<view class="backTJ_CS"></view>
						</view>
						<formCity style="width: 100%;" :texthidden="true" :is_register="1" :item="cityItemState"
							:is_port="true" @change="selCityState" />
					</view>
				</view>
				<view class="country_block_right">
					<view class="left_model">
						<view style="display: flex;color: #3D3D3D ;">
							
							<view style="z-index: 100;font-size: 25rpx;">{{$t('到达城市')}}</view>
							<view class="backTJ_CS"></view>
						</view>
						<formCity style="width: 100%;" :texthidden="true" :is_register="1" :item="cityItemEnd"
							:is_port="true" @change="selCityEnd" />
					</view>
				</view>
			</view>
		</view>

		<!-- 运输方式 -->
		<view class="tr_country" @click="isShow.isTransports = true">
			<image :src="HTTP_IMG_UTL+'one_22571@4x.png'" mode="" style="width: 52rpx;height: 52rpx;" />
			<view class="tr_country_block">
				<view class="country_block_left">
					<view class="left_model">
						<view style="display: flex;color: #3D3D3D ;">
							<view style="z-index: 100;font-size: 25rpx;">{{$t('运输方式')}}</view>
							<view class="backTJ_YS"></view>
						</view>
						<view style="font-size: 20rpx;">{{model.TransportTitle!==''?model.TransportTitle:$t('请选择')}}
						</view>
					</view>
				</view>
				<view class="country_block_right">
				</view>
			</view>
		</view>

		<!-- 车型 -->
		<view class="tr_country" @click="isShow.isCardTypes = true">
			<view class="card_type">
				<view>{{model.CardTitle!==''?model.CardTitle:$t('车类型号')}}</view>
				<image :src="HTTP_IMG_UTL+'login_223@2x.png'"
					style="width: 16rpx;height: 10rpx;margin-left: 20rpx;" mode="" />
			</view>
		</view>

		<!-- 整车散货 -->
		<view v-if="id==1 || id==2" class="tr_country" @click="isShow.isCargo = true">
			<image :src="HTTP_IMG_UTL+'one_33575@4x.png'" mode="" style="width: 52rpx;height: 52rpx;" />
			<view class="tr_country_block">
				<view class="left_model">
					<view style="display: flex;color: #3D3D3D ;">
						<view style="z-index: 100;font-size: 25rpx;">{{$t('货物类型')}}</view>
						<view class="backTJ"></view>
					</view>
					<view style="font-size: 20rpx;">{{model.CargoTitle!==''?model.CargoTitle:$t('请选择')}}</view>
				</view>
			</view>
		</view>

		<!-- 下一步 - 页面跳转按钮 -->
		<view class="but_style">
			<u-button class="custom-style" :disabled="isDisabled" :loading="isLoading" @click="handeleNext">{{$t('下一步')}}</u-button>
		</view>

		<u-picker :default-selector=[defaultSelectorIndex] @confirm="handelePicker"
			:range-key="lang==='zh'?'name':'name_ru'" :confirm-text="$t('确定')" :cancel-text="$t('取消')"
			v-model="isShow.iscountry" :mode="selector" :range="country"></u-picker>

		<!-- 运输方式弹窗 -->
		<u-popup v-model="isShow.isTransports" mode="bottom" border-radius="16" :mask-close-able="able">
			<view class="isCargo">
				<view class="Cargo_header_title">
					<view @click="handeleCancel(1)" style="color: #999999;font-size: 24rpx;">{{$t('取消')}}</view>
					<view style="font-size: 30rpx;">{{$t('运输方式')}}</view>
					<view @click="handeleDetermine(1)" style="font-size: 24rpx;">{{$t('确定')}}</view>
				</view>
				<scroll-view class="scroll-content" scroll-y="true">
					<view class="Transports_style">
						<view @click="handeleTransports(index,item)"
							:class="index===TransportIndex?'Transports_block_active':'Transports_block'"
							v-for="(item,index) in Transports" :key="index">{{lang==='zh'?item.name:item.name_ru}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 车型底部弹窗 -->
		<u-popup v-model="isShow.isCardTypes" mode="bottom" border-radius="16" :mask-close-able="able">
			<view class="isCargo">
				<view class="Cargo_header_title">
					<view @click="handeleCancel(2)" style="color: #999999;font-size: 24rpx;">{{$t('取消')}}</view>
					<view style="font-size: 30rpx;">{{$t('车型')}}</view>
					<view @click="handeleDetermine(2)" style="font-size: 24rpx;">{{$t('确定')}}</view>
				</view>
				<scroll-view class="scroll-content" scroll-y="true">
					<view class="CardType_style_block">
						<view @click="handeleCardItem(index)"
							:class="index===CardIndex?'CardType_style_active':'CardType_style'"
							v-for="(item,index) in CardTypes" :key="index">
							{{lang==='zh'?$t(item.name):$t(item.name_ru)}}</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 整车散货底部弹窗 -->
		<u-popup v-model="isShow.isCargo" mode="bottom" border-radius="16" :mask-close-able="able">
			<view class="isCargo">
				<view class="Cargo_header_title">
					<view @click="handeleCancel(3)" style="color: #999999;font-size: 24rpx;">{{$t('取消')}}</view>
					<view style="font-size: 30rpx;">{{$t('整车散货')}}</view>
					<view @click="handeleDetermine(3)" style="font-size: 24rpx;">{{$t('确定')}}</view>
				</view>
				<view class="Cargo_header_buttom">
					<view @click="handeleCargoItem(index)" :class="index===CargoIndex?'Cargo_item':'Cargo_item_active'"
						v-for="(item,index) in CargoList" :key="index">{{lang==='zh'?item.name:item.text}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	import formCity from '../components/formCitys.vue'
	export default {
		components: {
			formCity
		},
		data() {
			return {
				HTTP_IMG_UTL,
				cityItemState: {
					key: "city_id",
					label: false,
					placeholder: this.$t('请选择'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
				cityItemEnd: {
					key: "city_id",
					label: false,
					placeholder: this.$t('请选择'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
				selector: 'selector',
				able: true,
				isShow: { //所有控制弹窗bool值
					iscountry: false, //出法国目的国
					isCargo: false, //控制整车散货数据底部弹窗
					isCardTypes: false, //控制车型数据底部弹窗
					isTransports: false // 运输方式弹窗
				},
				isDisabled: false, //防抖
				isLoading: false, //防抖
				lang: 'zh', //语言默认中文
				arrList: [{ //顶部选项
						id: '1',
						title: '有车求货',
						title_ru: 'Поиск транспорта'
					},
					{
						id: '2',
						title: '小件快递',
						title_ru: 'Маленькие пакеты'
					},
				],
				indexID: 0,

				modelIds: {
					Transporid: '',
					Cargoid: '', //整车散货id
					Cardid: '' //车型选项id
				},

				model: { //所有的title值
					setOutTitle: '', //出发国
					destinationCountryTitle: '', //目的国
					TransportTitle: '', //运输方式选项
					CargoTitle: '', //整车散货选项
					CardTitle: '', //车型选项
					start:'',//出发城市
					end:''//目的城市
				},
				countryIndex: '', //出法国下标
				TransportIndex: '', //运输方式下标
				CardIndex: '', //车型下标
				CargoIndex: '', //整车散货下标

				backups: { //备份选项
					TransportIndex_A: '', //运输方式备份选项
					CargoIndex_A: '', //整车散货备份选项
					CardIndex_A: '', //车型备份选项
				},
				CargoList: [], //整车散货数据
				CardTypes: [], //获取车辆类型
				Transports: [], //运输方式
				country: [{
						id: '1',
						name: '中国',
						name_ru: 'Китай'
					},
					{
						id: '2',
						name: '俄罗斯',
						name_ru: 'Россия'
					},
				],
				defaultSelectorIndex: 0,
				type:1,
				id:'',
				title:''
			}
		},
		onLoad(options) {
			this.title = options.title
			this.id = options.id
			this.type = options.type
		},
		onShow() {
			// 获取语言
			this.getLang()
			// 获取整车散货
			this.handeleSheetList()
			// 获取车辆类型
			// this.getCardType()
			// 获取运输方式
			this.handeleActionSheetList()
		},
		methods: {
			
			// 点击下一步
			handeleNext(){
				if(
				this.model.setOutTitle==='' &&
				this.model.destinationCountryTitle==='' &&
				this.model.start===''  &&
				this.model.end ==='' &&
				this.model.TransportTitle==='' &&
				this.model.CardTitle ==='' &&
				this.model.CargoTitle ===''
				){
					uni.showToast({
						title: this.$t('请至少选择一项'),
						icon: 'none'
					})
				}else{
					let data={}
					if(this.lang==='zh'){
						data={
							type:1,
							page:1,
							release_type:this.id,
							departure_country:this.model.setOutTitle===''?'':((this.model.setOutTitle==='中国'||this.model.setOutTitle==='Китай')?0:1),
							reach_country:this.model.destinationCountryTitle === ''?'':((this.model.destinationCountryTitle === '中国'||this.model.destinationCountryTitle === 'Китай')?0:1),
							whole_diffuse:this.model.CargoTitle,
							mode:this.model.TransportTitle,
							departure_city:this.model.start,//出发地城市
							reach_city:this.model.end,//目的地城市
							car_category_id:this.modelIds.Cardid//车型
						}
					}else {
						data={
							type:1,
							page:1,
							release_type:this.id,
							departure_country:this.model.setOutTitle===''?'':((this.model.setOutTitle==='中国'||this.model.setOutTitle==='Китай')?0:1),
							reach_country:this.model.destinationCountryTitle === ''?'':((this.model.destinationCountryTitle === '中国'||this.model.destinationCountryTitle === 'Китай')?0:1),
							whole_diffuse:this.model.CargoTitle,
							mode:this.model.TransportTitle,
							departure_city:this.model.start,//出发地城市
							reach_city:this.model.end,//目的地城市
							car_category_id:this.modelIds.Cardid//车型
						}
					}
					
					console.log('data:',data);
					uni.navigateTo({
						url:'/pages/index/transportList/transportList?data='+JSON.stringify(data)
					})
				}
				
				// if(this.model.setOutTitle===''){
				// 	uni.showToast({
				// 		title: this.$t('请选择出发国'),
				// 		icon: 'none'
				// 	})
				// }else if(this.model.destinationCountryTitle===''){
				// 	uni.showToast({
				// 		title: this.$t('请选择目的国'),
				// 		icon: 'none'
				// 	})
				// }else if(this.model.start===''){
				// 	uni.showToast({
				// 		title: this.$t('请选择出发城市'),
				// 		icon: 'none'
				// 	})
				// }else if(this.model.end===''){
				// 	uni.showToast({
				// 		title: this.$t('请选择目的城市'),
				// 		icon: 'none'
				// 	})
				// }else if(this.model.TransportTitle===''){
				// 	uni.showToast({
				// 		title: this.$t('请选择运输方式'),
				// 		icon: 'none'
				// 	})
				// }else if(this.model.CardTitle===''){
				// 	uni.showToast({
				// 		title: this.$t('请选择车型'),
				// 		icon: 'none'
				// 	})
				// }else if(this.model.CargoTitle===''){
				// 	uni.showToast({
				// 		title: this.$t('请选择散车或整货'),
				// 		icon: 'none'
				// 	})
				// }else{
				// 	let data={
				// 		type:1,
				// 		page:1,
				// 		release_type:this.id,
				// 		departure_country:this.model.setOutTitle===''?'':(this.model.setOutTitle==='中国'?0:1),
				// 		reach_country:this.model.destinationCountryTitle === ''?'':(this.model.destinationCountryTitle === '中国'?0:1),
				// 		whole_diffuse:this.model.CargoTitle,
				// 		mode:this.model.TransportTitle,
				// 		departure_city:this.model.start,//出发地城市
				// 		reach_city:this.model.end,//目的地城市
				// 		car_category_id:this.modelIds.Cardid//车型
				// 	}
				// 	uni.navigateTo({
				// 		url:'/pages/index/transportList/transportList?data='+JSON.stringify(data)
				// 	})
				// }
			},
			// 开始城市
			selCityState(key,value){
				this.model.start = value[2].label
			},
			// 结束城市
			selCityEnd(key,value){
				console.log('value:',value);
				this.model.end = value[2].label
			},
			// Picker 出法国选择器
			handelePicker(e) {
				this.defaultSelectorIndex = e[0]
				console.log('e:', e[0]);
				if (this.countryIndex === 1) {
					this.model.setOutTitle = this.lang === 'zh' ? this.country[e[0]].name : this.country[e[0]].name_ru
				} else if (this.countryIndex === 2) {
					this.model.destinationCountryTitle = this.lang === 'zh' ? this.country[e[0]].name : this.country[e[0]]
						.name_ru
				}
			},
			// 出发国
			handeleSetout(index) {
				this.countryIndex = index
				this.isShow.iscountry = true
			},
			// 取消
			handeleCancel(index) {
				if (index === 3) { //3代表整车散货
					this.isShow.isCargo = false
					this.CargoIndex = this.backups.CargoIndex_A
				} else if (index === 2) {
					this.CardIndex = this.backups.CardIndex_A
					this.isShow.isCardTypes = false
				} else if (index === 1) {
					this.TransportIndex = this.backups.TransportIndex_A
					this.isShow.isTransports = false
				}
			},
			// 确定
			handeleDetermine(index) {
				if (index === 3) { //3代表整车散货
					this.isShow.isCargo = false
					this.backups.CargoIndex_A = this.CargoIndex //表整车散货备份选项
					this.model.CargoTitle = this.lang === 'zh' ? this.CargoList[this.CargoIndex].name : this.CargoList[this
						.CargoIndex].text //表整车散货回显的值
					this.modelIds.Cargoid = this.CargoList[this.CargoIndex].id
				} else if (index === 2) {
					this.isShow.isCardTypes = false
					this.backups.CardIndex_A = this.CardIndex
					this.model.CardTitle = this.lang === 'zh' ? this.CardTypes[this.CardIndex].name : this.CardTypes[this
						.CardIndex].name_ru
					this.modelIds.Cardid = this.CardTypes[this.CardIndex].id
				} else if (index === 1) {
					this.model.CardTitle = ''
					this.modelIds.Cardid=''
					this.isShow.isTransports = false
					this.backups.TransportIndex_A = this.TransportIndex
					this.model.TransportTitle = this.lang === 'zh' ? this.Transports[this.TransportIndex].name : this
						.Transports[this.TransportIndex].name_ru
					this.modelIds.Transporid = this.Transports[this.TransportIndex].id

				}
			},
			// 运输方式
			handeleTransports(index,item) {
				this.getCardType(item.id)
				this.TransportIndex = index
			},
			// 车型选项
			handeleCardItem(index) {
				this.CardIndex = index
			},
			// 整车散货选项
			handeleCargoItem(index) {
				this.CargoIndex = index
			},
			
			
			// 获取运输方式
			handeleActionSheetList() {
				let data = {
					type: 'release_transport'
				}
				this.$u.api.basic.getActionSheetList(data).then(res => {
					this.Transports = res
				})
			},
			// 获取车辆类型
			getCardType(id) {
				let data = {
					type: 'release_transport',
					pid: id,
					lang: this.lang
				}
				this.$u.api.basic.getActionSheetList(data).then(res => {
					// "不限": "Без ограничений", 
					this.CardTypes = res
				})
			},
			// 获取整车散货
			handeleSheetList() {
				let data = {
					type: "whole_diffuse"
				}
				this.$u.api.basic.getActionSheetList(data).then(res => {
					this.CargoList = res
				})
			},

			// 顶部选择有车求货和小件快递
			handeleItem(index) {
				this.indexID = index
			},
			// 获取语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t(this.title)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.Transports_block_active {
		min-width: 198rpx;
		height: 70rpx;
		background: linear-gradient(109deg, #D3EF93 1%, rgba(229, 245, 203, 0.24) 61%);
		text-align: center;
		padding: 20rpx 20rpx 20rpx 20rpx;
		border-radius: 16rpx;
		margin: 10rpx 10rpx 10rpx 10rpx;

	}

	.Transports_block {
		min-width: 198rpx;
		height: 70rpx;
		background: #F3F3F3;
		text-align: center;
		padding: 20rpx 20rpx 20rpx 20rpx;
		border-radius: 16rpx;
		margin: 10rpx 10rpx 10rpx 10rpx;

	}

	.Transports_style {
		width: 655rpx;
		min-height: 180rpx;
		display: flex;
		flex-wrap: wrap;
		margin-left: 50rpx;
		// background-color: #96D7F8;
	}

	.CardType_style_block {
		// background-color: #96D7F8;
		width: calc(100% - 50rpx);
		display: flex;
		flex-wrap: wrap;
		margin-left: 30rpx;
	}

	.CardType_style_active {
		min-width: 80rpx;
		height: 70rpx;
		background: linear-gradient(109deg, #D3EF93 1%, rgba(229, 245, 203, 0.24) 61%);
		font-size: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx 20rpx 20rpx 20rpx;
		margin: 15rpx 15rpx 15rpx 15rpx;
	}

	.CardType_style {
		min-width: 80rpx;
		height: 70rpx;
		background: #F3F3F3;
		font-size: 24rpx;
		border-radius: 16rpx;
		padding: 20rpx 20rpx 20rpx 20rpx;
		margin: 15rpx 15rpx 15rpx 15rpx;
	}

	.scroll-content {
		width: 100%;
		height: calc(100% - 100rpx);
	}

	.Cargo_item_active {
		width: 308rpx;
		height: 108rpx;
		background: #F3F3F3;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		border-radius: 16rpx;
	}

	.Cargo_item {
		width: 308rpx;
		height: 108rpx;
		background: linear-gradient(109deg, #D3EF93 1%, rgba(229, 245, 203, 0.24) 61%);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		border-radius: 16rpx;
	}

	.Cargo_header_buttom {
		width: calc(100% - 100rpx);
		height: 208rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.Cargo_header_title {
		width: calc(100% - 60rpx);
		height: 125rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.isCargo {
		width: 100%;
		height: 383rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.custom-style {
		background-color: #000000;
		color: #ffffff;
	}

	.but_style {
		width: calc(100% - 148rpx);
		height: 93rpx;
		margin-top: 216rpx;
	}

	.left_model {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.right_model {
		width: 100rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	.backTJ_YS {
		margin-top: 20rpx;
		margin-left: -38rpx;
		width: 72rpx;
		height: 15rpx;
		border-radius: 22rpx;
		background: linear-gradient(270deg, #E7F7FF 0%, #96D7F8 100%);
		z-index: 99;
	}

	.backTJ_FD {
		margin-top: 20rpx;
		margin-left: -38rpx;
		width: 72rpx;
		height: 15rpx;
		border-radius: 22rpx;
		background: linear-gradient(270deg, rgba(176, 165, 223, 0.2) 0%, #B4A9E2 100%);
		z-index: 99;
	}

	.backTJ_CS {
		margin-top: 20rpx;
		margin-left: -53rpx;
		width: 72rpx;
		height: 15rpx;
		border-radius: 22rpx;
		background: linear-gradient(270deg, #EAF4F5 0%, #98D9D7 100%);
		z-index: 99;
	}

	.backTJ {
		margin-top: 20rpx;
		margin-left: -53rpx;
		width: 72rpx;
		height: 15rpx;
		border-radius: 22rpx;
		background: linear-gradient(270deg, #FEF5DD 0%, #FDD872 100%);
		z-index: 99;
	}

	.card_type {
		min-width: 72rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 25rpx;
	}

	.country_block_right {
		width: 50%;
		height: 100%;
		// background-color: red;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.country_block_left {
		width: 50%;
		height: 100%;
		// background-color: aqua;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	.tr_country_block {
		width: 574rpx;
		height: 100%;
		display: flex;
		margin-left: 12rpx;
	}

	.tr_country {
		width: calc(100% - 50rpx);
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 26rpx 20rpx 26rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 8rpx;
	}

	.tr_header_item_active {
		width: 340rpx;
		height: 80rpx;
		border-radius: 16rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
	}

	.tr_header_item {
		width: 340rpx;
		height: 80rpx;
		border-radius: 16rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(180deg, #D3EF93 -2%, rgba(229, 245, 203, 0.24) 53%);
	}

	.tr_header {
		width: calc(100% - 60rpx);
		height: 81rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.tr_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
<style>
	page {
		background: #F6F6F6;
	}
</style>